<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="outpatientEmergencyRevenueRanking1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="outpatientEmergencyRevenueRanking2">
        2020
      </div>
      <div v-if="curId===2" class="chart-content" ref="outpatientEmergencyRevenueRanking3">
        2021
      </div>
      <div v-if="curId===3" class="chart-content" ref="outpatientEmergencyRevenueRanking4">
        2022
      </div>
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis4-zhuyuanshouru',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    getArrByKey(data, k) {
        let key = k || 'value';
        let res = [];
        if (data) {
            data.forEach(function (t) {
                res.push(t[key]);
            });
        }
        return res;
    },
    getSymbolData (data){
        let arr = [];
        for (var i = 0; i < data.length; i++) {
            arr.push({
                value: data[i].value,
                symbolPosition: 'end',
            });
        }
        return arr;
    },
    changeTab(id){
      this.curId=id
    },
    makeData(){
      var data1 = [
          {
            id:1,
            name: 'NO7.陇西县第一人民医院',
            value: 10,
            sum: 10,
          },
          {
            id:2,
            name: 'NO5.陇西县第二人民医院',
            value: 20,
            sum: 10,
          },
          {
            id:3,
            name: 'NO4.陇西县妇幼保健医院',
            value: 23,
            sum: 50,
          },
          {
            id:4,
            name: 'NO2.陇西县中医医院',
            value: 44,
            sum: 60,
          },
          {
            id:5,
            name: 'NO8.陇西县第三人民医院',
            value: 10,
            sum: 10,
          },
          {
            id:6,
            name: 'NO6.陇西县中西医结合人民医院',
            value: 20,
            sum: 10,
          },
          {
            id:7,
            name: 'NO1.陇西县安通中西医医院',
            value: 53,
            sum: 50,
          },
          {
            id:8,
            name: 'NO3.陇西县福星中心医院',
            value: 24,
            sum: 60,
          },
          {
            id:9,
            name: 'NO9.陇西县马河镇卫生医院',
            value: 10,
            sum: 10
          }
      ];
      var data = data1.sort((a, b) => {
          return b.value - a.value;
      });
      const option1 = {
        backgroundColor: '',
        grid: {
          top: '3%',
          bottom: '-13%',
          right: '-27%',
          left: '1%',
          containLabel: true,
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
              triggerEvent: true,
              show: true,
              inverse: true,
              data: this.getArrByKey(data, 'name'),
              axisLine: {
                  show: false,
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLabel: {
                  show: false,
                  interval: 0,
                  color: '#fff',
                  align: 'left',
                  margin: 0,
                  fontSize: 10,
                  formatter: function (value, index) {
                      return '{title|' + value + '}';
                  },
                  rich: {
                      title: {
                          width: 145,
                      },
                      "NO1.陇西县第一人民医院": {
                          lineHeight: 18,
                          height: 13,
                          align: 'right',
                          backgroundColor: {
                              image: 'http://gaze.run/static/img/echarts_svg/terror.svg'
                          }
                      },
                  },
              },
            },
            {
              triggerEvent: true,
              show: true,
              inverse: true,
              data: this.getArrByKey(data, 'name'),
              axisLine: {
                  show: false,
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLabel: {
                  interval: 0,
                  shadowOffsetX: '-10px',
                  color: ['#fff'],
                  align: 'right',
                  verticalAlign: 'bottom',
                  lineHeight: 28,
                  fontSize: 10,
                  formatter: function (value, index) {
                      return (data[index].value / data[index].sum) * 100;
                  },
              },
            },
        ],
        series: [
            {
              name: 'XXX',
              type: 'pictorialBar',

              symbolSize: [10, 10],
              symbolOffset: [0, 0],
              z: 12,
              itemStyle: {
                  normal: {
                      color: '#14b1eb',
                  },
              },
              data: this.getSymbolData(data),
            },
            {
                name: '条',
                type: 'bar',
                showBackground: true,
                barBorderRadius: 10,
                yAxisIndex: 0,
                data: data,
                barWidth: 4,
                // align: left,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0,
                        [
                          {
                              offset: 0,
                              color: '#00C2FF',
                          },
                          {
                              offset: 1,
                              color: '#A5EFFF',
                          },
                        ],
                        false
                    ),
                    barBorderRadius: 10,
                  },
                  // color: '#A71A2B',
                  barBorderRadius: 4,
                },
                label: {
                    normal: {
                        color: '#fff',
                        show: true,
                        position: [0, '-15px'],
                        textStyle: {
                            fontSize: 10,
                        },
                        formatter: function (a, b) {
                            return a.name;
                        },
                    },
                },
            },
        ],
      };
      this.makeGraph(this.$refs.outpatientEmergencyRevenueRanking1,option1)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
        font-size: .11rem;
        width: .64rem;
        text-align: center;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) / 2 - 0.31rem) !important;
    overflow: hidden;
    .chart-content{
      padding-top: .1rem;
      padding-bottom: .1rem;
      width: 100%;
      // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      height:calc( (100vh - 1.23rem) / 2 - 0.31rem) !important;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>